<template>
  <div>
    <Tooltip
      content="tooltip"
      trigger="hover"
      @visible-change="change"
      :popper-options="popperOptions"
      :open-delay="0"
      :close-delay="0"
      :manual="true"
      ref="tooltipRef"
      @click="click">
      <h1>hover</h1>
    </Tooltip>
  </div>
</template>
<script setup lang="ts">
import type { Options } from '@popperjs/core'
import { ref } from 'vue'
import type { TooltipInstance } from './types'
import Tooltip from './Tooltip.vue'
const change = (e: boolean) => {
  console.log(e)
}
const tooltipRef = ref<TooltipInstance | null>(null)
const click = () => {
  if (!tooltipRef.value?.isOpen) {
    tooltipRef.value?.show()
  } else {
    tooltipRef.value?.hide()
  }
}
const popperOptions: Partial<Options> = { placement: 'top', strategy: 'fixed' }
</script>
